<template>
  <div class="baidu-map">
    <baidu-map
      class="map"
      ref="map"
      :center="center"
      :zoom="zoom"
      :scroll-wheel-zoom="true"
      @zoomend="syncCenterAndZoom"
      @moveend="syncCenterAndZoom"
    >

      <bm-marker
        v-for="(item,index) in pointArr"
        :key="index"
        :position="{lng: item.lng, lat: item.lat}"
        :icon="{
          // url: item.level == 1 ? require('../../../assets/img/map.png') : item.level.online ? require('../../../assets/img/mapBlue.png') : require('../../../assets/img/mapGray.png'),
          url: item.online ? require('../../../assets/img/mapBlue.png') : require('../../../assets/img/mapGray.png'),
          size: {width: 26, height: 30}
        }"
        :dragging="true"
        @mouseover="infoWindowOpen(item)"
        @mouseout="infoWindowClose(item)"
        @click="bmMarkerClick"
        style="position:relative"
      >
        <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
        <bm-info-window :show="item.st" @close="infoWindowClose" style="width:250px" class="infoBox" @open="infoWindowOpen">
          <p><span class="tit">设备编号：</span> <span>{{item.deviceId}}</span></p>
          <p><span class="tit">设备状态：</span><span>{{item.online ? '在线' : '离线'}}</span></p>
          <div class="list">
            <span class="tit">报警指标：</span><ul><li v-for="(it,ind) in item.quotaList" :key="ind">{{it.quotaName}} {{it.value}} {{it.unit}}</li></ul>
          </div>
        </bm-info-window>
      </bm-marker>
    </baidu-map>
  </div>
</template>


<script>
import Baidu from "vue-baidu-map";
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
import Vue from 'vue'

Vue.use(Baidu, {
  ak: "BBmGwu8WsnyTeH3XKrruZGKruhOaOIb2"
});

export default {
  name: "BaiduMaps",
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 定位, 可使用如“广州市海珠区”的地区字符串，也可以使用对象如 {lng: 116.404, lat: 39.915} 表示经纬度
      center: {lng: 116.400244, lat: 39.92556 },
      // 缩放等级
      zoom: 5,
      // 要标记的点
      pointArr: [],
      // 是否显示窗口内容
      show: false,
      markerPoint: {lng: 116.400244, lat: 39.92556 }
    };
  },
  watch: {
    data: {
      handler(val, oldVal) {
        this.addPoints();
      },
      deep: true
    }
  },
  methods: {
    infoWindowClose(item) {
      item.st = false
    },
    infoWindowOpen(item) {
      item.st = true
    },
    addPoints() {
      const points = [];
      this.data.forEach((res) => {
        res.level = 0
        res['quotaList'].forEach((val) => {val.level > 0 ? res.level = 1 : null} )
        points.push({...res, lat: res.location.split(',')[0], lng:res.location.split(',')[1], st: false})
      })
      this.pointArr = [...points];
      console.log(this.pointArr)
    },
    initCharts() {
      console.log("BaiduMap");
    },
    syncCenterAndZoom(e) {
      // console.log(e.target.getZoom());
      // console.log(e.target.getCenter());
    },
    bmMarker(data) {
      this.$emit("bmMarkerCallback", data);
    },
    bmMarkerClick(e) {
      this.bmMarker(e);
    }
  },
  mounted() {
    // this.addPoints();
  }
}
</script>
<style lang="scss">
/* 消息内容 */
.BMap_bubble_content {
  background-color:white;
}
/* 隐藏边角 */
.BMap_top, .BMap_bottom, .BMap_center, .BMap_pop div:nth-child(1) div {
  display:none;
}
.BMap_pop div:nth-child(3), .BMap_pop div:nth-child(4), .BMap_pop div:nth-child(5), .BMap_pop div:nth-child(7), .BMap_pop div:nth-child(8){
  display: none;
}
.BMap_pop div:nth-child(9){
  top: 42px !important;
  overflow: inherit !important;
}
.BMap_pop div:nth-child(9) img{
  display: none !important;
}
.BMap_pop img {
  top:43px !important;
  left:215px !important;
  z-index: -99 !important;
}
.BMap_shadow div img{
  display: none !important;
}
.infoBox {
  position: absolute;
  background: #fff;
  padding: 10px 14px;
  border-radius: 3px;
  font-size: 14px;
  line-height: 25px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
  color: #666;
  p, ul, li {
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .tit{
    display: inline-block;
    color: #999;
    width: 72px !important;
  }
  .list{
    display: flex;
  }
  &::before{
    position: absolute;
    content: '';
    bottom: -4px;
    left: 36%;
    width: 10px;
    height: 10px;
    transform: rotateZ(45deg);
    border-radius: 3px;
    background: #fff;
    border: solid 1px #fff;
  }
}
</style>
<style lang="scss" scoped>

.baidu-map {
  width: 100%;
  height: 100%;
  .map {
    width: 100%;
    height: 100%;
  }
}
</style>
